<template lang="pug">
  el-dialog(
    :visible="visible"
    :modal="false"
    width="50%"
    @close="closeHandle"
    custom-class="previewModal"
    center
  )
    el-carousel(indicator-position="none" v-if="items.length > 1")
      el-carousel-item(v-for="item in items" :key="item" :initial-index="curIndex" :autoplay="false")
        img(:src="item")
    img(:src="urls" v-else)
</template>
<script>
export default {
  name: 'Preview',
  props: {
    urls: {
      type: [Array, String],
      default: () => []
    },
    curIndex: {
      type: Number,
      default: 0
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    items () {
      if (this.urls && typeof this.urls === 'string') {
        return Array.of(this.urls)
      }
      return this.urls || []
    }
  },
  methods: {
    closeHandle () {
      this.$emit('toggle')
    }
  }
}
</script>
